Border-radius для <img> в Opera...

[Yamaradg]

Добрый День! При применении св-ва "border-radius" к тегу <img> столкнулся с трудностями при отображении в Opera.

Вобщем свойство просто не работает... Задавать картинки бэкграундом не подходит для заказчика!(хотя в этом случае border-radius работает нормально.)

Не подскажите - существует ли выход для подобных ситуаций?

P.S. Ссылку на сайт предоставляю:

http://yamaradg.narod2.ru/history/Matrix/index.html

Буду очень признателен за помощь!

[Vlad]

Это безжалостная к пользователям Оперы проблема. Ожидается в версии 12.0 решение. Наверное только через скрипты или картинки универсальное решение будет.

[Yamaradg]

Это безжалостная к пользователям Оперы проблема. Ожидается в версии 12.0 решение. Наверное только через скрипты или картинки универсальное решение будет.

Спасибо за совет!

[Softlink]

Это безжалостная к пользователям Оперы проблема. Ожидается в версии 12.0 решение. Наверное только через скрипты или картинки универсальное решение будет.

Спасибо за совет!

А такой вариант вам не подойдет?

Вся загвоздка в том, что он подходит только для однородного фона.

[zSpx]

Старый добрый пнг

Зы: забавно, но этот пример не работает ни в Хроме, ни в ФФ, не могу посмотреть Сафари и IE. Конечно картинка лишняя все равно подгружается, но все же почти работает..)

Edited October 14, 2011 by zSpx

[psywalker]

Softlink, zSpx, Братва, а какой результат даёт :after, :before у ваших картинок?

Вроде убираю их (Хром, ФФ), ничего не меняется.

[Yamaradg]

Это безжалостная к пользователям Оперы проблема. Ожидается в версии 12.0 решение. Наверное только через скрипты или картинки универсальное решение будет.

Спасибо за совет!

А такой вариант вам не подойдет?

Вся загвоздка в том, что он подходит только для однородного фона.

Этот вариант в опере заработал но получаеться что в данном случае нужно делать {margin:6px;}(как минимум...)

+ перестал работать скрипт для IE-7,8?...

P.S. Хотя не исключаю, что это я что то упустил из виду...

[zSpx]

Softlink, zSpx, Братва, а какой результат даёт :after, :before у ваших картинок?Вроде убираю их (Хром, ФФ), ничего не меняется.

Для Хрома и ФФ - никакого Судя по всему они псевдоблок этот под img прячут всегда, но вот Опера обрабатывает как обычно...

[psywalker]

Softlink, zSpx, Братва, а какой результат даёт :after, :before у ваших картинок?Вроде убираю их (Хром, ФФ), ничего не меняется.

Для Хрома и ФФ - никакого Судя по всему они псевдоблок этот под img прячут всегда, но вот Опера обрабатывает как обычно...

Понятно. Спасибо, но жаль конечно же.

[Softlink]

Softlink, zSpx, Братва, а какой результат даёт :after, :before у ваших картинок?

Вроде убираю их (Хром, ФФ), ничего не меняется.

Макс, мой вариант отсюда http://forum.htmlbook.ru/index.php?showtopic=28923 , забыл уже что ли?)

[psywalker]

Softlink, zSpx, Братва, а какой результат даёт :after, :before у ваших картинок?

Вроде убираю их (Хром, ФФ), ничего не меняется.

Макс, мой вариант отсюда http://forum.htmlbook.ru/index.php?showtopic=28923 , забыл уже что ли?)

Вот этот?

http://www.alpatriott.ru/works/primer/opera-radius.html

Да, я помню, просто раньше не обращал внимание на афтер у картинки.

[rash]

А что мешает ставить картинку фоном, а оригинальную — скрывать с помощью opacity: 0 ? При этом блок ведет себя как полноценная картинка, с соответствующим контекстным меню и поведением.

Можно, по идее, сделать и JS-ом при загрузке страницы, никто не обидится.

[Softlink]

Вот этот?

http://www.alpatriott.ru/works/primer/opera-radius.html

Да, я помню, просто раньше не обращал внимание на афтер у картинки.

да, этот. Там до безобразия все просто, через after накладывается тень поверх картинки и прячет ей углы. В Хроме и ФФ пример не работает просто потому, что я специально не написал префикс для box-shadow, поэтому там нет тени и "рамки". Как только эти браузеры начнут понимать свойство без префикса, все детали проявятся. Но к тому времени, думается, Опера уже пофиксит этот баг.

[psywalker]

Вот этот?

http://www.alpatriott.ru/works/primer/opera-radius.html

Да, я помню, просто раньше не обращал внимание на афтер у картинки.

да, этот. Там до безобразия все просто, через after накладывается тень поверх картинки и прячет ей углы. В Хроме и ФФ пример не работает просто потому, что я специально не написал префикс для box-shadow, поэтому там нет тени и "рамки". Как только эти браузеры начнут понимать свойство без префикса, все детали проявятся. Но к тому времени, думается, Опера уже пофиксит этот баг.

Стоять! Я понимаю, что делает твой пример, НО погоди! Какие префиксы? box-shadow давно уже работает без них везде.

Тут дело в другом. В самом :after у картинки, которое НЕ пашет в ФФ, Хроме и ИЕ9.

Понял? Или это я гоню?

[zSpx]

Понятно. Спасибо, но жаль конечно же.

Почему? Хорошо же) Хоть как-то можно проблему решить. Т.е. псевдоэлементы тут только для Оперы сделаны, с помощью них можно наложить маску в виде пнг изображения с закругленными краями и эмулировать бордер-радиус. Т.к. остальные браузеры (не уверен на счет ИЕ9, сейчас сижу жду скриншоты с браузершота, т.к. там где я сейчас, он не установлен) псевдоэлемент прячут под img, то и лишнюю картинку не загружают, что есть хорошо (зачем нам лишние запросы?). Получился небольшой хак. Лично мне это может быть полезным.

А что мешает ставить картинку фоном, а оригинальную — скрывать с помощью opacity: 0 ? При этом блок ведет себя как полноценная картинка, с соответствующим контекстным меню и поведением.

Можно, по идее, сделать и JS-ом при загрузке страницы, никто не обидится.

Тут такое ТЗ, фоном нельзя, да и как это сделать, скажем на движке магазина, где большое количество товара с изображениями, не трогая сам скрипт магазина? JS можно, да.

Edited October 14, 2011 by zSpx

[Softlink]

Тут дело в другом. В самом :after у картинки, которое НЕ пашет в ФФ, Хроме и ИЕ9.

Судя по всему дело именно в этом. Когда я собирал тот вариант, тогда еще была привычка ставить префиксы, потому я не стал их ставить для вебкита и фф и успокоился. А оно оказывается вон че.

[SelenIT]

Псевдоэлементы применяются к элементам, у которых может быть контент (перед и после него соотв-но). <img> — пустой элемент, контента не имеет по определению, поэтому псевдоэлементов у него быть не должно (и нигде нет). Но Опера позволяет менять контент у всего (через св-во content), в т.ч. у <img>, поэтому в ней у <img> контент может появиться, а значит, и псевдоэлементы для него имеют право на существование — и потому отображаются. Я так это понимаю.

Кстати, благодаря этой оперной особенности задачу можно решить еще и как-то так. Да, через бякграунды, но (только что проверил) Open Image/Save Image в браузерном меню работают...

[psywalker]

Понятно. Спасибо, но жаль конечно же.

Почему? Хорошо же) Хоть как-то можно проблему решить. Т.е. псевдоэлементы тут только для Оперы сделаны, с помощью них можно наложить маску в виде пнг изображения с закругленными краями и эмулировать бордер-радиус. Т.к. остальные браузеры (не уверен на счет ИЕ9, сейчас сижу жду скриншоты с браузершота, т.к. там где я сейчас, он не установлен) псевдоэлемент прячут под img, то и лишнюю картинку не загружают, что есть хорошо (зачем нам лишние запросы?). Получился небольшой хак. Лично мне это может быть полезным.

Я не спорю, что тут этот трюк приносит пользу. Но я возмущался именно из-за неработающих псевдоэлементов у картинки. Т.е. если, например возникнут другие задачи, где потребуется сделать псевдоэлементы у картинок, то мы не сможешь этого сделать. Вот, в чём беда.

Тут дело в другом. В самом :after у картинки, которое НЕ пашет в ФФ, Хроме и ИЕ9.

Судя по всему дело именно в этом. Когда я собирал тот вариант, тогда еще была привычка ставить префиксы, потому я не стал их ставить для вебкита и фф и успокоился. А оно оказывается вон че.

Именно!

Псевдоэлементы применяются к элементам, у которых может быть контент (перед и после него соотв-но). <img> — пустой элемент, контента не имеет по определению, поэтому псевдоэлементов у него быть не должно (и нигде нет). Но Опера позволяет менять контент у всего (через св-во content), в т.ч. у <img>, поэтому в ней у <img> контент может появиться, а значит, и псевдоэлементы для него имеют право на существование — и потому отображаются. Я так это понимаю.Кстати, благодаря этой оперной особенности задачу можно решить еще и как-то так. Да, через бякграунды, но (только что проверил) Open Image/Save Image в браузерном меню работают...

Спасибо за пример. Но есть вопрос. Выходит, что псевдоэлементы у картинок не будут поддерживаться вообще? Даже в будущих версиях браузеров?

Извиняюсь за некорректный вопрос.

[SelenIT]

Судя по текущим спекам CSS3 Selectors (с прошлого месяца в статусе рекомендации!):

Псевдоэлементы ::before и ::after служат для описания генерируемого контента перед или после контента элемента.

и W3C HTML5:

Пустые (void) элементы

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr

...

Пустые элементы не могут иметь никакого контента (т.к. нет закрывающего тега, никакой контент не может быть помещен между открывающим и закрывающим тегами).

я полагаю, что да — в ближайших несколько лет псевдоэлементы для картинок поддерживаться не будут...

[psywalker]

SelenIT,

Ясно, спасибо дружище. Жаль конечно. А почему тада опера это делает?

[SelenIT]

Полагаю, потому что она хотела быть впереди планеты всей и решила поддержать экспериментальный черновик CSS3 (застывший в 2003-м), где свойство content было допустимым для всех элементов. А сказав "А" (разрешив пустым элементам иметь контент, пусть и генерируемый), пришлось говорить и "Б" (разрешать вставлять перед/после этого контента еще что-нибудь).

P.S. По сабжевой проблеме — когда-то что-то слышал, что Опера впридачу к SVG-фонам умела применять к ним SVG-эффекты, в частности маску. Теоретически, могло бы помочь. Но рабочей хотя бы демки этой фичи я что-то сходу не нагуглил...

Edited October 14, 2011 by SelenIT

[psywalker]

SelenIT,

Понял, спасибо ещё раз, теперь всё ясно.

[SelenIT]

Сегодня я внезапно обнаружил, что Хром теперь тоже поддерживает content и псевдоэлементы для <img>. Ох, что-то начинается...

[Softlink]

Сегодня я внезапно обнаружил, что Хром теперь тоже поддерживает content и псевдоэлементы для <img>. Ох, что-то начинается...

Вот это новости. Хотя у меня ничего не поменялось. Хром ничего не показал

[SelenIT]

Разницу можно использовать, например, в том же скруглении углов, если у самой картинки есть бордер. Без финта с контентом получается вот так, а с ним — нормально.

Вот слева без content:'', справа с ним. Т.е. в Хроме с его помощью тоже можно экономить обертки.

[psywalker]

SelenIT,

Илюх, а у меня несколько вопросов по этому делу.

1. А разве Хром не поддерживал border-radius для картинок?

2. Что ты делаешь этим скриптом?

$('img').each(
    function(i,e){
        $(e).css(
            {
                'backgroundImage':'url('+e.src+')',
                'width': e.width + 'px',
                'height': e.height + 'px'
            }
        ).addClass('operaRounded') 
    }
);

3. А что даёт пустой content: ''; на классе

.operaRounded {
    display: inline-block;
    content: '';
}